<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }"><i class="el-icon-s-promotion"></i> 商品详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品ID">
              <span>{{ props.row.productId }}</span>
            </el-form-item>
            <el-form-item label="商品名称">
              <span>{{ props.row.productName }}</span>
            </el-form-item>
            <el-form-item label="商品描述">
              <span>{{ props.row.productDescription }}</span>
            </el-form-item>
            <el-form-item label="商品价格">
              <span>{{ props.row.productPrice }}</span>
            </el-form-item>
            <el-form-item label="商品数量">
              <span>{{ props.row.productQuantity }}</span>
            </el-form-item>
            <el-form-item label="商品供应商">
              <span>{{ props.row.supplierId }}</span>
            </el-form-item>
            <el-form-item label="商品交易时间" >
              <span>{{ props.row.productTransactionDate }}</span>
            </el-form-item>
            <el-form-item label="商品状态">
              <span>{{ props.row.status }}</span>
            </el-form-item>
            <el-form-item label="警戒线">
              <span>{{ props.row.cordon }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
          label="商品 ID"
          prop="productId">
      </el-table-column>
      <el-table-column
          label="商品名称"
          prop="productName">
      </el-table-column>
      <el-table-column
          label="描述"
          prop="productDescription">
      </el-table-column>
    </el-table>
  </div>

</template>
<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 120px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<script>
export default {
  data() {
    return {
      tableData: []
    }
  },
  created() {
    let x = JSON.parse(this.$route.query.everything);
    let url ='http://localhost:9999/table/financilalTablex';
    console.log(x);
    this.axios.get(url,{params:{id:x}}).then((response)=>{
      this.tableData = response.data.data;
    })
  }
}
</script>

<style scoped>

</style>